<template>
  <div class="apply">
    <ul v-if="messageList.length > 0">
      <li v-for="item in messageList" :key="item.uid">
        <el-descriptions class="margin-top" :column="3" :size="size" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ item.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              用户ID
            </template>
            {{ item.uid }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              申请角色
            </template>
            <el-tag size="small">{{ item.rolename }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              申请理由
            </template>
            {{ item.applymsg }}
          </el-descriptions-item>
        </el-descriptions>
        <p>
          <el-button
            type="primary"
            size="small"
            @click="PassRoleCheck(item, 'Y')"
            >同意</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="PassRoleCheck(item, 'N')"
            >拒绝</el-button
          >
        </p>
      </li>
    </ul>
    <el-empty description="暂无消息" v-else></el-empty>
  </div>
</template>

<script>
export default {
  name: "RoleApplyList",
  data() {
    return {
      size: "",
      //角色申请数据
      messageList: [],
    };
  },
  methods: {
    //处理角色申请
    PassRoleCheck(item, isflag) {
      // 连接服务器
      this.$http({
        method: "post",
        url: "role/isPassRoleCheck",
        params: {
          uid: item.uid,
          isflag: isflag,
        },
      }).then(({ data }) => {
        if (data.flag) {
          this.$message.success("操作成功！");
          this.loadRoleList();
        } else {
          // 登录失败展示错误信息
          this.$message.error(data.data.errorMsg);
        }
      });
    },
    //初始化加载角色申请消息
    loadRoleList() {
      // 连接服务器
      this.$http({
        method: "post",
        url: "role/showApplyRoleCheck",
      }).then(({ data }) => {
        if (data.flag) {
          //参数初始化赋值
          this.messageList = data.data;
        } else {
          // 登录失败展示错误信息
          console.log(data.data.errorMsg);
        }
      });
    },
  },
  mounted() {
    //挂载加载初始化消息列表数据
    this.loadRoleList();
  },
};
</script>

<style lang="less" scoped>
// 设置申请样式
.apply {
  ul {
    li {
      margin: 50px 0px;
      &:first-child {
        margin-top: 0px;
      }
      p {
        text-align: center;
        margin: 20px 0px;
        .el-button {
          margin: 0px 20px;
        }
      }
      /deep/.el-descriptions .is-bordered .el-descriptions-item__cell {
        border-color: #939292;
      }
    }
  }
}
</style>